<template>
  <div class="container-fluid">
    <div class="row mb-1">
      <div class="col-3">
        <el-select v-model="objs.isuse" clearable placeholder="是否通过">
          <el-option label="通过" :value="1" />
          <el-option label="未审核" :value="0" />
          <el-option label="未通过" :value="2" />
        </el-select>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <el-table :data="tableData" border style="width: 100%" height="75vh" @sort-change="sortchange">
          <el-table-column sortable prop="ID" label="ID" width="80" />
          <el-table-column prop="user.name" label="用户" width="120" />
          <el-table-column prop="question.name" label="题目名称" />
          <el-table-column sortable :formatter="(row) => isuse[row.isuse]" prop="isuse" label="是否通过" />
          <el-table-column prop="createdAt" label="提交时间" :formatter="(e) => TimeYH(e.createdAt)" width="160" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="info" @click="
                dialogVisible = true;
              updatedata = JSON.parse(JSON.stringify(scope.row));
              ">
                查看
              </el-button>
              <el-button type="danger" @click="del(scope.row.ID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog width="80%" destroy-on-close title="查看" v-model="dialogVisible">
          <el-row v-loading="loading">
            <el-col :span="16">
              <el-form :model="updatedata" label-width="85px" size="default">
                <el-form-item label="ID:">
                  {{ updatedata.ID }}
                </el-form-item>
                <el-form-item label="题目:">
                  <el-link target="_blank" :href="`https://oj.hterobot.com/#/question/${updatedata.questionid}`">
                    {{ updatedata.questionid }} - {{ updatedata.question?.name }}
                  </el-link>
                </el-form-item>
                <el-form-item label="审核状态">
                  <el-radio-group v-model="updatedata.isuse" class="ml-4">
                    <el-radio :label="1">通过</el-radio>
                    <el-radio :label="2" :disabled="!updatedata.examine">不通过</el-radio>
                  </el-radio-group>
                  <el-select v-model="updatedata.examine">
                    <el-option label="已有相似测试点" value="已有相似测试点" />
                    <el-option label="测试点不正确" value="测试点不正确" />
                    <el-option label="此题不需要更多测试点" value="此题不需要更多测试点" />
                  </el-select>
                </el-form-item>
                <el-row v-if="updatedata.type !== 'url'">
                  <el-col :span="12">
                    输入：
                    <pre v-text="updatedata.input" class="border"></pre>
                  </el-col>
                  <el-col :span="12">
                    输出：
                    <pre v-text="updatedata.output" class="border"></pre>
                  </el-col>
                </el-row>
                <el-row v-if="updatedata.type === 'url'">
                  <el-col :span="12">
                    输入：
                    <a :href="updatedata.input">{{ updatedata.input }}</a>
                  </el-col>
                  <el-col :span="12">
                    输出：
                    <a :href="updatedata.output">{{ updatedata.output }}</a>
                  </el-col>
                </el-row>
                <el-form-item label="测试点有无重复:" label-width="120px">

                  {{ updatedata.repeat ? '重复' : '未重复' }}
                </el-form-item>
                <el-form-item label="备注:" label-width="120px">
                  {{ updatedata.context }}
                </el-form-item>
                <el-form-item label="提交人：">
                  <el-link :href="`/#/user?userid=${updatedata.userid}`">
                    {{ updatedata.user?.name }}

                  </el-link>
                  题解贡献积分： {{ integral.find(e => e.type === '测试点贡献')?.nums || 0 }}
                </el-form-item>
                <el-form-item label="题目测试点数：" label-width="140px">
                  {{ thistanledatacount }}
                </el-form-item>
                <el-form-item label="保存">
                  <el-button @click="updateprompt(updatedata)">保存</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8" :style="{ borderLeft: '1px solid #000' }">
              <div>已拥有的测试点：</div>
              <el-table :data="thistanledata" height="450px">
                <el-table-column prop="input" label="input"></el-table-column>
                <el-table-column prop="output" label="output"></el-table-column>
                <el-table-column prop="score" label="得分" width="70"></el-table-column>
              </el-table>
            </el-col>
          </el-row>

          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="
                dialogVisible = false;
              IID = 0;
              ">关闭</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";

import {
  asyncchangequestiontestcasesuser,
  asyncdelquestiontestcasesuser,
  asyncgetintegral,
  asyncgetquestion,
  asyncselectquestiontestcasesuser,
  Iobj,
} from "../../../api/index";

import Studycodemodel from "../../../mysql_interface/studycodemodel";

import { ElMessage, ElMessageBox } from "element-plus";
import { TimeYH } from "../../../util/time";

const p = defineProps<{ obj: Iobj<Studycodemodel.Iquestiontestcasesuser>, setcount: (n: number) => void, changeobj: (data: any) => void }>()

const e = defineEmits<{
  (event: 'change'): void
  (event: 'update', obj: Iobj<Studycodemodel.Iquestiontestcasesuser>): void
}>()

const isuse = ["未处理", "已通过", "未通过"];

const dialogVisible = ref(false);

const IID = ref(0);

const tableData = ref<Studycodemodel.Iquestiontestcasesuser[]>([]);
const updatedata = ref<Studycodemodel.Iquestiontestcasesuser>({})
const thistanledata = ref<Studycodemodel.Itestcases[]>([]);
const thistanledatacount = ref(0);
async function start() {
  const obj = {
    ...p.obj,
    ...objs
  }
  const data = await asyncselectquestiontestcasesuser(obj);
  tableData.value = data.rows;
  p.setcount(data.count)
}

onMounted(() => {
  start();
});

async function next1() {
  await start();
  const data = tableData.value[0]
  if (data) {
    updatedata.value = data
  } else {
    dialogVisible.value = false
  }
}
const loading = ref(false)
const objs = reactive<Iobj<Studycodemodel.Iquestiontestcasesuser>>({
  _order: 'ID',
  _sortable: "DESC",
  isuse: 0,
})

watch(p.obj, start)
watch(objs, start)

const integral = ref<{ nums: number, type: Studycodemodel.Iintegral['type'] }[]>([])

watch(() => updatedata.value?.userid, e => {
  if (e) {
    asyncgetintegral({
      userid: e
    }).then(e => {
      integral.value = e
    })
  }
})


function del(ID: number) {
  ElMessageBox.confirm("确定要删除次测试点", "确定", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async () => {
      await asyncdelquestiontestcasesuser({ ID });
      ElMessage.success("删除成功");
      start();
    })
    .catch((e: any) => {
      console.log(e);
    });
}

function sortchange(row: { order: string; prop: any }) {
  const { prop } = row;
  if (row.order == "descending") {
    objs._order = prop;
    objs._sortable = "DESC"
  } else {
    objs._order = prop;
    objs._sortable = "ASC"
  }
}

async function updateprompt(row: Studycodemodel.Iquestiontestcasesuser) {
  loading.value = true
  const testcases: Studycodemodel.Itestcases = {
    input: row.input,
    output: row.output,
    type: row.type,
    questionid: row.questionid,
  };
  if (row.isuse === 1) {
    await asyncchangequestiontestcasesuser({ ...row, testcases });
  } else {
    await asyncchangequestiontestcasesuser({ ...row });
  }
  await next1()
  loading.value = false

}

watch(() => updatedata.value?.questionid, e => {
  if (e) {
    asyncgetquestion({
      ID: e
    }).then(e => {
      thistanledata.value = e.testcases || []
      thistanledatacount.value = e.testcases?.length || 0
    })

  }
})

</script>
